<template>
  <div class="theme-switcher">
    <el-dropdown trigger="click" @command="changeTheme">
      <span class="theme-dropdown-link">
        <i class="el-icon-brush icon-hover"></i>
        <span class="theme-text">主题</span>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="default">
          <span class="color-dot default"></span>默认主题
        </el-dropdown-item>
        <el-dropdown-item command="dark">
          <span class="color-dot dark"></span>暗黑主题
        </el-dropdown-item>
        <el-dropdown-item command="blue">
          <span class="color-dot blue"></span>蓝色主题
        </el-dropdown-item>
        <el-dropdown-item command="green">
          <span class="color-dot green"></span>绿色主题
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'ThemeSwitcher',
  data() {
    return {
      currentTheme: 'default'
    }
  },
  created() {
    // 从本地存储加载主题
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      this.applyTheme(savedTheme)
    }
  },
  methods: {
    // 切换主题
    changeTheme(theme) {
      this.applyTheme(theme)
      localStorage.setItem('theme', theme)
    },
    
    // 应用主题
    applyTheme(theme) {
      this.currentTheme = theme
      
      // 移除所有主题类
      document.body.classList.remove('theme-default', 'theme-dark', 'theme-blue', 'theme-green')
      
      // 添加新主题类
      document.body.classList.add(`theme-${theme}`)
      
      // 设置CSS变量
      const root = document.documentElement
      
      switch (theme) {
        case 'dark':
          root.style.setProperty('--primary-color', '#409EFF')
          root.style.setProperty('--bg-primary', '#1e1e1e')
          root.style.setProperty('--bg-secondary', '#121212')
          root.style.setProperty('--text-primary', '#ffffff')
          root.style.setProperty('--text-secondary', '#b0b0b0')
          root.style.setProperty('--border-color', '#333333')
          break
          
        case 'blue':
          root.style.setProperty('--primary-color', '#1976D2')
          root.style.setProperty('--bg-primary', '#f5f9fc')
          root.style.setProperty('--bg-secondary', '#e8f4fc')
          root.style.setProperty('--text-primary', '#0d47a1')
          root.style.setProperty('--text-secondary', '#5c6bc0')
          root.style.setProperty('--border-color', '#bbdefb')
          break
          
        case 'green':
          root.style.setProperty('--primary-color', '#2e7d32')
          root.style.setProperty('--bg-primary', '#f1f8e9')
          root.style.setProperty('--bg-secondary', '#e8f5e9')
          root.style.setProperty('--text-primary', '#1b5e20')
          root.style.setProperty('--text-secondary', '#558b2f')
          root.style.setProperty('--border-color', '#c8e6c9')
          break
          
        default: // 默认主题
          root.style.setProperty('--primary-color', '#409EFF')
          root.style.setProperty('--bg-primary', '#ffffff')
          root.style.setProperty('--bg-secondary', '#f5f7fa')
          root.style.setProperty('--text-primary', '#303133')
          root.style.setProperty('--text-secondary', '#606266')
          root.style.setProperty('--border-color', '#e4e7ed')
          break
      }
    }
  }
}
</script>

<style scoped>
.theme-switcher {
  display: inline-block;
  margin-right: 15px;
}

.theme-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-secondary);
}

.theme-dropdown-link:hover {
  color: var(--primary-color);
}

.theme-text {
  margin-left: 5px;
  font-size: 14px;
}

.color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.color-dot.default {
  background-color: #409EFF;
}

.color-dot.dark {
  background-color: #1e1e1e;
}

.color-dot.blue {
  background-color: #1976D2;
}

.color-dot.green {
  background-color: #2e7d32;
}
</style>